<template>
  <div class="home">
    <div class="homePublic" @click="goto('/home')" :class="{ on: '/home' === $route.path }">
      <span>
        <svg class="icon homeSvg" aria-hidden="true">
          <use xlink:href="#icon-home"></use>
        </svg>
        <span class="spanColor">首页</span>
      </span>
    </div>
    <div class="homePublic" @click="goto('/find')" :class="{ on: '/find' === $route.path }">
      <span>
        <svg class="icon homeSvg" aria-hidden="true">
          <use xlink:href="#icon-faxian"></use>
        </svg>
        <span class="spanColor">发现</span>
      </span>
    </div>
    <div class="homePublic" @click="goto('/shoppingcar')" :class="{ on: '/shoppingcar' === $route.path }">
      <span>
        <svg class="icon homeSvg" aria-hidden="true">
          <use xlink:href="#icon-gouwugouwuchedinggou"></use>
        </svg>
        <span class="spanColor">购物车</span>
      </span>
    </div>
    <div class="homePublic" @click="addGoto('/login')" :class="{ on: '/profile' === $route.path }">
      <span>
        <svg class="icon homeSvg" aria-hidden="true">
          <use xlink:href="#icon-shouye"></use>
        </svg>
        <span class="spanColor">我的</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goto(path) {
      let currentPath = this.$router.currentRoute.path
      if (currentPath !== path) {
        this.$router.push(path)
      }
    },
    addGoto(path) {
      if (localStorage.getItem('userName')) {
        let currentPath = this.$router.currentRoute.path
        if (currentPath !== path) {
          this.$router.push(path)
        }
        this.$router.replace('/profile')
      } else {
        this.$router.replace('/login')
      }
    },
  },
}
</script>

<style scoped lang="stylus">
.home {
  width: 100%;
  text-align: center;
  border-top: 1px solid #eee;
  background: #fff;
  position: fixed;
  bottom: 0;

  .homePublic {
    display: flex;
    float: left;
    width: 25%;
    height: 40px;

    &.on {
      color: red;
    }

    span {
      text-align: center;
      margin: 0 auto;

      .homeSvg {
        width: 23px;
        height: 21px;
        line-height: 21px;
        position: fixed;
        text-align: center;
      }

      .homeSvg:last-of-type:hover {
        fill: red;
      }
    }

    .spanColor {
      display: inline-block;
      padding-top: 20px;
      font-size: 14px;
      margin-top: 3px;
    }
  }
}
</style>
